<template>
    <el-card class="config-card">
        <template #header>
            <div class="title">
                系统配置
            </div>
        </template>
        <el-form :model="formData" ref="formRef" :rules="Rules" style="width: 600px;" label-width="140px" v-loading="loading">
            <el-form-item label="高拍仪路径" prop="fileCameraDir" >
                <el-input v-model="formData.fileCameraDir" placeholder="请输入高拍仪路径" class="form-input" />
            </el-form-item>
            <el-form-item label="文档路径" prop="fileProjectDir" >
                <el-input v-model="formData.fileProjectDir" placeholder="请输入文档路径" class="form-input" />
            </el-form-item>
            <el-form-item label="扫描仪文件路径" prop="fileScamDir" >
                <el-input v-model="formData.fileScamDir" placeholder="请输入扫描仪文件路径" class="form-input" />
            </el-form-item>
            <el-form-item label="扫描仪安装地址" prop="scannerExePath" >
                <el-input v-model="formData.scannerExePath" placeholder="请输入扫描仪安装地址" class="form-input" />
            </el-form-item>
            <el-form-item label="扫描仪驱动名称" prop="scannerWinTitle" >
                <el-input v-model="formData.scannerWinTitle" placeholder="请输入扫描仪驱动名称" class="form-input" />
            </el-form-item>
            <el-form-item label="服务设备得IP" prop="serverIp" >
                <div style="position: relative;width: 100%;">
                    <el-input v-model="formData.serverIp" placeholder="请输入服务设备得IP" class="form-input" /> 
                    <el-button type="primary" :loading="testLoading" :disabled="!formData.serverIp" @click="testRquest" link class="test-btn">测试连接</el-button>
                </div>
            </el-form-item>
            <div class="btn-footer" align="center">
                <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
            </div>
        </el-form>
    </el-card>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { getConfigData, setConfigData, connect_server } from '@/api/user';
import { ElMessage } from 'element-plus';
const formData = ref({});
const loading = ref(false);
const testLoading = ref(false);
const formRef = ref(null);
const Rules = computed(() => ({
    fileCameraDir: [{ required: true, message: '请输入高拍仪路径', trigger: 'blur' }],
    fileProjectDir: [{ required: true, message: '请输入文档路径', trigger: 'blur' }],
    fileScamDir: [{ required: true, message: '请输入扫描仪文件路径', trigger: 'blur' }],
    scannerExePath: [{ required: true, message: '请输入扫描仪安装地址', trigger: 'blur' }],
    scannerWinTitle: [{ required: true, message: '请输入扫描仪驱动名称', trigger: 'blur' }],
    serverIp: [{ required: true, message: '请输入服务设备得IP', trigger: 'blur' }]
}));
const testRquest = async () => {
    testLoading.value = true;
    let res = await connect_server(formData.value.serverIp);
    testLoading.value = false;
    if(res.errorCode == 0){
        ElMessage.success('请求成功');
    }
}
onMounted(() => {
    getConfig();
})
const getConfig = () => {
    loading.value = true;
    getConfigData().then(res => {
        loading.value = false;

        if(res.errorCode == 0){
            formData.value = res.data;
        }
    })
}
const handleSubmit = async () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            loading.value = true;
            const res = await setConfigData(formData.value);
            loading.value = false;
            if(res.errorCode == 0){
                ElMessage.success('保存成功');
            }
        } else {
            console.log('error submit!!');
            return false;
        }
    });
}
</script>

<style lang="scss" scoped>
.config-card{
    .title{
        font-size: 20px;
        font-weight: bold;
        color: #333;
    }
    .btn-footer{

    }
    .test-btn{
        margin-left: 10px;
    }
}
</style>